<template>
	<div id="artcle_item">
		<div class="art_data" v-for="(item,index) in Article" :key="index">
			<div class="decde">
				<h3>{{ item.title }}</h3>
				<div>
					{{ item.content }}
				</div>
			</div>
			<div class="score">
				<span>
					发表时间 : {{ item.posttime }}
				</span>
				<span>
					点赞数 : {{ item.agreenum }}
				</span>
			</div>
		</div>
	</div>
</template>

<script>
	import pubsub from 'pubsub-js'
	import axios from 'axios'
	export default{
		name:'Article',
		data() {
			return{
				Article:''
			}
		},
		beforeMount() {
			axios({
				url:'http://127.0.0.1:5000/user/myarticle',
				method:'post',
				data:{
					acountname:window.sessionStorage.getItem('acountname')
				}
			}).then((response)=>{
				console.log(response);
				console.log(response.data.article);
				this.Article=response.data.article
				
			}).catch(function(error){
			
			})
		},
		mounted() {
			pubsub.publish('clickIndex',0);
		},
	}
</script>

<style scoped>
	#artcle_item{
		display: flex;
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		
		width: 70%;
		height: 100%;
		overflow-y: auto;
		overflow: scroll;
		
		background-color: white;
		border: 0.7px solid rgb(235, 235, 235);
		border-radius: 5px 5px;
		box-shadow: -2px -2px 0.5em gray;
	}
	.art_data{
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		
		width: 98%;
		height: 15.125rem;
		margin-top: 0.625rem;
		border: 0.7px solid rgb(235, 235, 235);
		border-radius: 5px 5px;
	}
	.decde{
		position: relative;
		height: 70%;
		overflow: auto;
	}
	.score{
		position: absolute;
		
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		
		bottom: 0;
		width: 100%;
		height: 20%;
		background-color: gray;
	}
	.score span{
		left: 20px;
	}
</style>